<template>
    <div class="table-management">
        <div class="table-count">当前共有{{tables.length}}张餐桌</div>
        <div class="create">
            创建桌号：<input type="text" v-model="tableName">
            <button @click="createTable">生成</button>
        </div>
        <ul class="table-list">
            <li class="table-item" v-for="(table,index) in tables" :key="index">
                <i class="delete-button el-icon-circle-close" @click="deleteTable(table)"></i>
                <div class="title">
                    <div><i class="el-icon-platform-eleme"></i> 欢迎使用吃了吗</div>
                    <div>扫码点餐系统</div>
                </div>
                <div :id="table.name" class="qrCode"></div>
                <div class="name">桌号：{{table.name}}</div>
            </li>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">
    import QRCode from "qrcodejs2"

    export default {
        data() {
            return {
                tableName: '',
                tables: [],
                serverUrl: ''
            }
        },
        created() {
            this.getTableList();
        },
        methods: {
            createTable() {
                if (this.tableName === '') {
                    this.$message({
                        message: '请输入桌号！',
                        type: 'error'
                    });
                    return;
                }
                this.$http.get('/api/table/create', {
                    params: {
                        name: this.tableName
                    }
                }).then((response) => {
                    response = response.data;
                    if (response.code === 0) {
                        this.$message({
                            message: response.msg,
                            type: 'success',
                            customClass: 'alert-shadow'
                        });
                        this.getTableList();
                    } else {
                        this.$message({
                            message: response.msg,
                            type: 'error',
                            customClass: 'alert-shadow'
                        });
                    }
                })
            },
            getTableList() {
                this.$http.get('/api/table/list').then((response) => {
                    this.tables = response.data.tables;
                    this.serverUrl = response.data.serverUrl;
                    this.qrCode();
                })
            },
            qrCode() {
                let that = this;
                let qrCodes = document.getElementsByClassName('qrCode');
                this.tables.forEach((table, index) => {
                    this.$nextTick(() => {
                        qrCodes[index].innerHTML = '';
                        new QRCode(table.name, {
                            width: 124,
                            height: 124,        // 高度
                            text: that.serverUrl + table.name,   // 二维码内容
                            // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                            // background: '#f0f',   // 背景色
                            // foreground: '#ff0'    // 前景色
                        })
                    });
                })
            },
            deleteTable(table) {
                this.$http.get('/api/table/delete', {
                    params: {
                        id: table.id
                    }
                }).then((response) => {
                    response = response.data;
                    if (response.code === 0) {
                        this.$message({
                            message: response.msg,
                            type: 'success',
                            customClass: 'alert-shadow'
                        });
                        this.getTableList();
                    } else {
                        this.$message({
                            message: response.msg,
                            type: 'error',
                            customClass: 'alert-shadow'
                        });
                    }
                })
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .table-management {
        margin 10px
        padding 10px 10px 20px
        box-shadow 0 0 10px darkgrey
        border-radius 10px
        .table-count{
            margin 30px
        }
        .create {
            margin 30px

            input {
                border-radius 5px
                height 30px
                border 1px solid #409EFF
                padding-left 5px
            }

            button {
                margin-left 10px
                padding 0 10px
                height 30px
                width 50px
                box-sizing border-box
                color white
                background #409EFF
                border none
                border-radius 5px
            }
        }

        .table-list {
            .table-item {
                position relative
                display inline-block
                padding 16px 12px 10px
                margin 10px
                box-shadow 0 0 30px darkgrey
                border-radius 5px
                background darkorange
                &:hover .delete-button{
                    display block
                }
                &:hover{
                    box-shadow 0 0 80px darkgrey
                }
                .delete-button {
                    position absolute
                    top 4px
                    right 4px
                    display none
                    color white
                    cursor pointer
                }

                .title {
                    font-size 14px

                    div {
                        text-align center
                        padding-bottom 5px
                    }
                }

                .qrCode {
                    padding 4px
                    background #409EFF
                }

                .name {
                    padding 10px
                    box-sizing border-box
                    text-align center
                    font-weight 700
                    width 107px
                    margin auto
                    overflow hidden
                    white-space nowrap
                }
            }
        }
    }
</style>
